﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Metropolis - About</title>
        <meta name="description" content="Multipurpose HTML5 Themplate">
        <meta name="author" content="pixel-industry">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">


        <!-- stylesheets -->
        <link rel="stylesheet" href="css/basic.css" />
        <link rel="stylesheet" href="css/style.css" />   
        <link rel="stylesheet" href="css/responsive.css" /> 
        <link rel="stylesheet" href="css/red.css" />
        <link rel="stylesheet" href="css/nivo-slider.css" />

        <!-- Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic' rel='stylesheet' type='text/css'>

        <!-- Icons -->
        <link rel="stylesheet" href="pixons/style.css" />
        <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
        
        <link rel="stylesheet" href="style-switcher/styleSwitcher.css" media="screen" />

        <!--[if lt IE 9]>
            <script src="js/html5shiv.js"></script>
        <![endif]-->
        
        <!--[if lt IE 9]>
            <script src="js/selectivizr-min.js"></script>
        <![endif]-->
        
        <!--[if IE 8]>
            <link rel="stylesheet" href="css/ie8.css" media="screen" />
        <![endif]-->
    </head>

    <body>
         <!-- style switcher start -->
        <section id="style-switcher">
            <section id="styles-container">
                <section>
                    <h6>Layouts</h6>
                    <ul class="skin-list">
                        <li class="metropolis-default"><a href="../metropolis-default/about.html">Default</a></li>
                        <li class="metropolis-clean active"><a href="#">Clean & Minimal</a></li>
                        <li class="metropolis-blue"><a href="../metropolis-blue/about.html">Creative Blue</a></li>
                    </ul>
                </section>

                <section class="first">
                    <h6>Color Style</h6>
                    <p>Which theme color you want to use? Here are some predefined colors.</p>
                    <ul class="styles-list">
                        <li class="blue">1</li>
                        <li class="green">2</li>
                        <li class="orange">3</li>                        
                        <li class="red">4</li>
                        <li class="yellow">5</li>
                    </ul>
                </section>
            </section>
            <a href="#" id="styles-button"><div id="switcher-logo"></div></a>
        </section><!-- style switcher end -->
        
        <!-- #header-wrapper start -->
        <section id="header-wrapper" class="clearfix">
            <!-- #header start -->
            <header id="header" class="clearfix">

                <!-- #logo start -->
                <section id="logo">
                    <a href="index.html">
                        <img src="img/red/logo.png" alt="logo" />
                    </a>
                </section><!-- #logo end -->

                <!-- contact-info-container -->
                <section id="contact-info-container">
                    <ul class="info">
                        <li>
                            <span class="text-dark">Call us on:</span> +00 123 5874
                        </li>

                        <li>
                            <span class="text-dark">Email: </span>
                            <a class="text-color" href="malito:sales-info@business.com">sales-info@business.com</a>
                        </li>
                    </ul>

                    <ul class="social-links">
                        <li>
                            <a href="#" class="pixons-twitter-1"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-linkedin"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-facebook-1"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-xing"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-skype"></a>
                        </li>
                    </ul>
                </section><!-- .contact-info-container start -->
            </header><!-- #header end -->

            <!-- #nav-container start -->
            <section id="nav-container">

                <section class="container_12">
                    <section class="grid_12">
                        <!-- #nav start -->
                        <nav id="nav">
                            <ul>
                                <li>
                                    <span class="nav-icon icon-home"></span>
                                    <a href="index.html">Home</a>
                                </li>

                                <li class="current-menu-item">
                                    <span class="nav-icon icon-user"></span>
                                    <a href="#">Pages</a>
                                    <ul>
                                        <li class="current-menu-item"><a href="about.html">About</a></li>
                                        <li><a href="services.html">Services</a></li>
                                        <li><a href="faq.html">FAQ</a></li>
                                        <li><a href="page-sidebar-left.html">Page sidebar left</a></li>
                                        <li><a href="page-sidebar-right.html">Page sidebar right</a></li>
                                        <li><a href="pricing.html">Pricing tables</a></li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-camera"></span>
                                    <a href="#">Portfolio</a>
                                    <ul>
                                        <li><a href="portfolio1.html">Portfolio 1</a></li>
                                        <li><a href="portfolio2.html">Portfolio 2</a></li>
                                        <li><a href="portfolio2-alt.html">Portfolio 2 alternative</a></li>
                                        <li><a href="portfolio3.html">Portfolio 3</a></li>
                                        <li><a href="portfolio3-alt.html">Portfolio 3 alternative</a></li>
                                        <li><a href="portfolio4.html">Portfolio 4</a></li>
                                        <li><a href="portfolio4-alt.html">Portfolio 4 alternative</a></li>
                                        <li><a href="portfolio-gallery.html">Portfolio gallery</a></li>
                                        <li><a href="portfolio-single.html">Portfolio single</a></li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-list"></span>
                                    <a href="#">Blog</a>

                                    <ul>
                                        <li><a href="blog.html">Blog default</a></li>
                                        <li><a href="blog-alt.html">Blog alternative</a></li>
                                        <li><a href="blog-single.html">Blog single</a></li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-cogs"></span>
                                    <a href="#">Shortcodes</a>
                                    <ul>
                                        <li><a href="shortcodes.html">Page elements</a></li>
                                        <li><a href="#">Third level</a>
                                            <ul>
                                                <li><a href="#">Menu item</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-map-marker"></span>
                                    <a href="contact.html">Contact</a>
                                </li>
                            </ul>
                        </nav><!-- #nav end -->
                        
                        <!-- responsive navigation start -->
                        <select id="nav-responsive">
                            <option selected="" value="">Site Navigation...</option>

                            <option value="index.html">Home version 1</option>

                            <option value="about.html">About us</option>
                            <option value="services.html">Services</option>
                            <option value="faq.html">FAQ Page</option>
                            <option value="page-sidebar-left.html">Page sidebar left</option>
                            <option value="page-sidebar-right.html">Page sidebar right</option>
                            <option value="pricing.html">Pricing tables</option>

                            <option value="portfolio1.html">Portfolio 1 column</option>
                            <option value="portfolio2.html">Portfolio 2 columns</option>
                            <option value="portfolio2-alt.html">Portfolio 2 alternative</option>
                            <option value="portfolio3.html">Portfolio 3 columns</option>
                            <option value="portfolio3-alt.html">Portfolio 3 alternative</option>
                            <option value="portfolio4.html">Portfolio 4 columns</option>
                            <option value="portfolio4-alt.html">Portfolio 4 alternative</option>
                            <option value="portfolio-gallery.html">Portfolio gallery</option>
                            <option value="portfolio-single.html">Portfolio single</option>

                            <option value="blog.html">Blog default</option>
                            <option value="blog-alt.html">Blog alternative</option>
                            <option value="blog-single.html">Blog single</option>

                            <option value="shortcodes.html">Shortcodes</option>
                            <option value="contact.html">Contact</option>
                        </select><!-- responsive navigation end -->

                        <section id="search-box">
                            <form action="#" method="get">
                                <input id="m_search" name="s" type="text" placeholder="Type and hit enter..." />
                                <input class="search-submit" type="submit" />
                            </form>
                        </section>
                    </section><!-- .grid_12 end -->
                </section><!-- .container_12 end -->


            </section><!-- #nav-container end -->
        </section><!-- #header-wrapper start end -->

        <!-- .top-shadow -->
        <div class="top-shadow"></div>

        <!-- .page-title-container start -->
        <section class="page-title-container">

            <!-- .container_12 start -->
            <div class="container_12">

                <!-- .page-title start -->
                <div class="page-title grid_12">
                    <div class="title">
                        <h1>About us</h1>
                    </div>

                    <ul class="breadcrumbs">
                        <li><a  class="home" href="#">Home</a></li>
                        <li>/</li>
                        <li><span class="active">About us</span></li>
                    </ul>
                </div><!-- .page-title end -->
            </div><!-- .container_12 end -->
        </section><!-- .page-title-container end -->

        <!-- #content-wrapper start -->
        <section id="content-wrapper">

            <!-- .container_12 start -->
            <div class="container_12">

                <!-- .grid_6 .slider-wrapper start -->
                <article class="grid_6 slider-wrapper">

                    <!-- #slider .nivoSlider .image-slider start -->
                    <section id="slider" class="nivoSlider image-slider">
                        <img src="img/about/slide1.jpg" alt="slider image" title="#htmlcaption1">
                        <img src="img/about/slide2.jpg" alt="slider-image" title="#htmlcaption2">
                        <img src="img/about/slide3.jpg" alt="slider image" title="#htmlcaption3">
                    </section><!-- #slider .nivoSlider .image-slider end -->

                    <!-- #htmlcaption1 start -->
                    <div id="htmlcaption1">
                        <div class="title-wrap">
                            <div class="title">
                                <h3>Super Creative Agency</h3>
                            </div>
                        </div>

                        <div class="subtitle-wrap">
                            <div class="subtitle">
                                <p>With lot of experience in the field</p>
                            </div>
                        </div>
                    </div><!-- #htmlcaption1 end -->

                    <!-- #htmlcaption1 start -->
                    <div id="htmlcaption2">
                        <div class="title-wrap">
                            <div class="title">
                                <h3>Making Web Responsive</h3>
                            </div>
                        </div>

                        <div class="subtitle-wrap">
                            <div class="subtitle">
                                <p>Your Websites will look excellent on any device</p>
                            </div>
                        </div>
                    </div><!-- #htmlcaption1 end -->

                    <!-- #htmlcaption1 start -->
                    <div id="htmlcaption3">
                        <div class="title-wrap">
                            <div class="title">
                                <h3>Highly Professional Team</h3>
                            </div>
                        </div>

                        <div class="subtitle-wrap">
                            <div class="subtitle">
                                <p>Take a second a meet our creative professionals</p>
                            </div>
                        </div>
                    </div><!-- #htmlcaption1 end -->

                </article><!-- .grid_6 .slider-wrapper end -->

                <!-- .grid_6 start -->
                <article class="grid_6">
                    <section class="section-title left">
                        <h3>Welcome to Our Website</h3>
                    </section>

                    <span class="text-dark text-big">
                        We are super creative agency specialized in creating 
                        beautiful, clean and responsive premium web themes.
                    </span>

                    <br /><br />

                    <p>
                        Lorem ipsum dolor sit amet, cosectetuer adipiscing elit, 
                        sed diam nonummy nibh euismod tincidunt ut laoreet 
                        dolore magna aliquam erat volutpat. Ut wisi enim ad 
                        minim veniam, quis nostrud exerci. Claritas est etiam 
                        processus dynamicus, qui sequitur mutationem 
                        consuetudium lectorum. Mirum est notare quam littera 
                        gothica, quam nunc putamus parum claram, anteposuerit 
                        litterarum.

                        <br /><br />

                        Claritas est etiam processus dynamicus, qui sequitur 
                        mutationem consuetudium lectorum. Mirum est notare quam 
                        littera gothica, quam nunc putamus parum claram, 
                        anteposuerit litterarum.  Eodem modo typi, qui nunc 
                        nobis videntur parum clari, fiant sollemnes in futurum.
                    </p>
                </article><!-- .grid_6 end -->

                <div class="clearfix"></div>

                <!-- .grid_8 start -->
                <article class="grid_8">
                    <!-- .section-title .center start -->
                    <section class="section-title center">
                        <div class="title-container">
                            <section class="title">
                                <h2>Why Choose Us</h2>
                                <span>Top Reasons to Choose Metropolis</span>
                            </section>
                        </div>
                    </section><!-- .section-title .center end -->

                    <img src="img/about/responsive.png" class="float-left" alt="image">

                    <p>
                        Lorem ipsum dolor sit amet, cosectetuer adipiscing elit, 
                        sed diam nonummy nibh euismod tincidunt ut laoreet 
                        dolore magna aliquam erat volutpat. Ut wisi enim ad
                        minim veniam, quis nostrud exerci tation ullamcorper 
                        suscipit loboris nisl ut aliquip ex ea commodo.
                    </p>

                    <br />

                    <ul class="arrow-list">
                        <li>Super clean and responsive design that will look excellent on any device</li>
                        <li>Organized, commented clean code makes customization incredibly easy</li>
                        <li>Three different layouts with five predefined color options</li>
                    </ul>
                </article><!-- .grid_8 end -->

                <!-- grid_4 start -->
                <article class="grid_4">
                    <!-- .section-title .center start -->
                    <section class="section-title center">
                        <div class="title-container">
                            <section class="title">
                                <h2>What We Do</h2>
                                <span>Our fields of expertise</span>
                            </section>
                        </div>
                    </section><!-- .section-title .center end -->

                    <!-- .skills-bar -->
                    <article class="skills-bar">
                        <ul class="skills">
                            <li>

                                <span class="expand web-design"></span>
                                <em>Web design 80%</em>
                            </li>

                            <li>

                                <span class="expand web-development"></span>
                                <em>Web development 70%</em>
                            </li>

                            <li>

                                <span class="expand wordpress"></span>
                                <em>Wordpress 90%</em>
                            </li>

                            <li>

                                <span class="expand marketing"></span>
                                <em>Marketing 60%</em>
                            </li>
                        </ul>
                    </article><!-- .skills-bar -->
                </article><!-- grid_4 end -->

                <!-- .grid_12 start -->
                <article class="grid_12">
                    <!-- .section-title .center start -->
                    <section class="section-title center">
                        <div class="title-container">
                            <section class="title">
                                <h2>Our Team</h2>
                                <span>Meet our professionals</span>
                            </section>
                        </div>
                    </section><!-- .section-title .center end -->

                    <!-- .grid_4 alpha .team start -->
                    <article class="grid_3 alpha team">

                        <!-- .team-info start -->
                        <section class="team-info">
                            <img src="img/about/team1.jpg" alt="team member" />

                            <div class="title-position">
                                <div class="title">
                                    <h6>Brian Simper</h6>
                                </div>

                                <div class="position">
                                    <span>Company CEO, Marketing</span>
                                </div>
                            </div>
                        </section><!-- .team-info end -->

                        <!-- .team-cv start -->
                        <section class="team-cv">
                            <p>
                                Duis autem vel eum iriure dolor in hend rerit in 
                                vulputate velit esse molese con sequat, vel 
                                illum dolore eu feugiat nulla facilisis at vero 
                                eros.
                            </p>
                        </section><!-- .team-cv end -->

                        <!-- .team-social start -->
                        <ul class="team-social-links">
                            <li>
                                <a href="#" class="pixons-twitter-1"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-google_plus"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-linkedin"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-facebook-1"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-xing"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-skype"></a>
                            </li>
                        </ul><!-- .team-social end -->

                    </article><!-- .grid_4 .slpha .team end -->

                    <!-- .grid_4 .team start -->
                    <article class="grid_3 team">

                        <!-- .team-info start -->
                        <section class="team-info">
                            <img src="img/about/team2.jpg" alt="team member" />

                            <div class="title-position">
                                <div class="title">
                                    <h6>Callista Wort</h6>
                                </div>

                                <div class="position">
                                    <span>Senior Web Developer</span>
                                </div>
                            </div>
                        </section><!-- .team-info end -->

                        <!-- .team-cv start -->
                        <section class="team-cv">
                            <p>
                                Duis autem vel eum iriure dolor in hend rerit in 
                                vulputate velit esse molese con sequat, vel 
                                illum dolore eu feugiat nulla facilisis at vero 
                                eros.
                            </p>
                        </section><!-- .team-cv end -->

                        <!-- .team-social start -->
                        <ul class="team-social-links">
                            <li>
                                <a href="#" class="pixons-twitter-1"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-google_plus"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-linkedin"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-facebook-1"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-xing"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-skype"></a>
                            </li>
                        </ul><!-- .team-social end -->

                    </article><!-- .grid_4 .team end -->

                    <!-- .grid_4 .team start -->
                    <article class="grid_3 team">

                        <!-- .team-info start -->
                        <section class="team-info">
                            <img src="img/about/team3.jpg" alt="team member" />

                            <div class="title-position">
                                <div class="title">
                                    <h6>Milla Hollser</h6>
                                </div>

                                <div class="position">
                                    <span>Senior Marketing Manager</span>
                                </div>
                            </div>
                        </section><!-- .team-info end -->

                        <!-- .team-cv start -->
                        <section class="team-cv">
                            <p>
                                Duis autem vel eum iriure dolor in hend rerit in 
                                vulputate velit esse molese con sequat, vel 
                                illum dolore eu feugiat nulla facilisis at vero 
                                eros.
                            </p>
                        </section><!-- .team-cv end -->

                        <!-- .team-social start -->
                        <ul class="team-social-links">
                            <li>
                                <a href="#" class="pixons-twitter-1"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-google_plus"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-linkedin"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-facebook-1"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-xing"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-skype"></a>
                            </li>
                        </ul><!-- .team-social end -->

                    </article><!-- .grid_4 .team end -->

                    <!-- .grid_4 omega .team start -->
                    <article class="grid_3 omega team">

                        <!-- .team-info start -->
                        <section class="team-info">
                            <img src="img/about/team4.jpg" alt="team member" />

                            <div class="title-position">
                                <div class="title">
                                    <h6>Chris Darster</h6>
                                </div>

                                <div class="position">
                                    <span>Senior Web Designer</span>
                                </div>
                            </div>
                        </section><!-- .team-info end -->

                        <!-- .team-cv start -->
                        <section class="team-cv">
                            <p>
                                Duis autem vel eum iriure dolor in hend rerit in 
                                vulputate velit esse molese con sequat, vel 
                                illum dolore eu feugiat nulla facilisis at vero 
                                eros.
                            </p>
                        </section><!-- .team-cv end -->

                        <!-- .team-social start -->
                        <ul class="team-social-links">
                            <li>
                                <a href="#" class="pixons-twitter-1"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-google_plus"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-linkedin"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-facebook-1"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-xing"></a>
                            </li>

                            <li>
                                <a href="#" class="pixons-skype"></a>
                            </li>
                        </ul><!-- .team-social end -->

                    </article><!-- .grid_4 .omega .team end -->

                </article><!-- .grid_12 end -->

                <article class="grid_12 client-carousel">
                    <!-- .section-title .center start -->
                    <section class="section-title center">
                        <div class="title-container carousel">
                            <div class="carousel-nav-container">
                                <ul class="carousel-nav">
                                    <li>
                                        <a class="prev" href="#"></a> 
                                    </li>
                                </ul>

                            </div>

                            <section class="title">
                                <h2>Our Clients</h2>
                                <span>Clients & Partners We Work With</span>
                            </section>

                            <div class="carousel-nav-container">
                                <ul class="carousel-nav">
                                    <li>
                                        <a class="next" href="#"></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </section><!-- .section-title .center end -->

                    <ul id="client-carousel" class="carousel-li">
                        <li>
                            <a href="">
                                <img src="img/about/client1.png" alt="client logo" />
                            </a>
                        </li>

                        <li>
                            <a href="">
                                <img src="img/about/client2.png" alt="client logo" />
                            </a>
                        </li>

                        <li>
                            <a href="">
                                <img src="img/about/client3.png" alt="client logo" />
                            </a>
                        </li>

                        <li>
                            <a href="">
                                <img src="img/about/client4.png" alt="client logo" />
                            </a>
                        </li>

                        <li>
                            <a href="">
                                <img src="img/about/client5.png" alt="client logo" />
                            </a>
                        </li>

                        <li>
                            <a href="">
                                <img src="img/about/client6.png" alt="client logo" />
                            </a>
                        </li>
                    </ul><!-- .client-carousel end -->
                </article><!-- .grid_12 end -->

            </div><!-- .container_12 end -->
        </section><!-- #content-wrapper end -->

        <!-- #footer-wrapper start -->
        <div id="footer-wrapper" class="clearfix">

            <!-- #footer -->
            <footer id="footer" class="container_12">

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    
                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">

                        <section class="carousel-article">
                            <img src="img/red/logo-footer.png" alt="logo" />

                            <br /><br />

                            <ul id="foo1" class="carousel-li">
                                <li>
                                    <p>
                                        We proudly present you Metropolis, perfectly 
                                        clean and original theme. This is sliding 
                                        article, yo you can put more info about your 
                                        company.  
                                    </p>
                                </li>

                                <li>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error 
                                        sit voluptatem accusantium doloremque laudantium, 
                                        totam rem aperiam, eaque ipsa quae ab illo 
                                        inventore veritatis et quasi. 
                                    </p>
                                </li>

                                <li>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error 
                                        sit voluptatem accusantium doloremque laudantium, 
                                        totam rem aperiam, eaque ipsa quae ab illo 
                                        inventore veritatis et quasi. 
                                    </p>
                                </li>
                            </ul>

                            <div class="clearfix"></div>

                            <div class="carousel-pagination" id="foo1_pag"></div>
                        </section>

                    </li><!-- .widget.widget_text end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    <!-- .widget pi_recent_posts start -->
                    <li class="widget pi_recent_posts">
                        <div class="title">
                            <h5>latest posts</h5>
                        </div>

                        <ul class="footer-blog">
                            <li>
                                <div class="meta">
                                    <a class="icon-edit"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html"> Nam libero tempore, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">0 COMMENTS</a></p>
                                </div>
                            </li>

                            <li>
                                <div class="meta">
                                    <a class="icon-link"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html">Temporibus autem quibusdam, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                </div>
                            </li>

                            <li>
                                <div class="meta">
                                    <a class="icon-camera"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html">Excepteur sint occaecat cupid, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                </div>
                            </li>
                        </ul>


                    </li><!-- .widget pi_recent_posts end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    
                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">
                        <div class="title">
                            <h5>get in touch</h5>
                        </div>
                        <p>
                            If you have any questions don't hesitate to contact us
                        </p>

                        <br />

                        <ul class="contact-info">
                            <li class='address'>
                                <p>Address: Some street 123, Manhattan, New York, USA</p>
                            </li>

                            <li class="phone">
                                <p>Telephone: +00 123 5874</p>
                            </li>

                            <li class="mail">
                                <p>Email: <a href='mailto:sales-info@business.com'>info@business.com</a></p>
                            </li>
                        </ul>
                    </li><!-- .widget.widget_text end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    
                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">
                        <div class="title">
                            <h5>newsletter subscribe</h5>
                        </div>

                        <p>
                            Stay up to date with latest news from our company. 
                            We promise we won’t spam you.
                        </p>

                        <br />

                        <form class="newsletter">
                            <input type="email" class="email" placeholder="Enter your email here...">
                            <input type ="submit" class="submit" value="SEND">
                        </form>
                    </li><!-- .widget.widget_text end -->

                </ul><!-- footer-widget-container end -->
            </footer><!-- #footer end -->

            <!-- .container_12.copyright-container start -->
            <div class="container_12 copyright-container">
                
                <!-- .grid_12 start -->
                <div class="grid_12">                  

                    <div class="grid_6 alpha">
                        <p>
                            Copyright Metropolis 2013. Designed by Pixel industry. All rights reserved.
                        </p>
                    </div>

                    <div class="grid_6 omega">
                        <ul class="footer-breadcrumbs">
                            <li>
                                <a href="index.html">Home</a>
                            </li>

                            <li>
                                <a href="about.html">About</a>
                            </li>

                            <li>
                                <a href="portfolio1.html">Portfolio</a>
                            </li>

                            <li>
                                <a href="blog.html">Blog</a>
                            </li>

                            <li>
                                <a href="contact.html">Contact</a>
                            </li>
                        </ul>
                    </div><!-- .grid_6 omega end -->
                </div><!-- .grid_12 end -->
            </div><!-- .container_12.copyright-container end -->
        </div><!-- #footer-wrapper end -->

        <!-- scripts -->
        <script  src="js/jquery-1.8.3.js"></script> <!-- jQuery library -->  
        <script  src="js/jquery.placeholder.min.js"></script><!-- jQuery placeholder fix for old browsers -->
        <script  src="js/jquery.carouFredSel-6.0.0-packed.js"></script><!-- CarouFredSel carousel plugin -->
        <script  src="js/jquery.nivo.slider.js"></script><!-- nivo slider -->
        <script  src="js/jquery.touchSwipe-1.2.5.js"></script><!-- support for touch swipe on mobile devices -->
        <script  src="style-switcher/styleSwitcher.js"></script><!-- Style Switcher plugin -->
        <script  src="js/include.js"></script> <!-- jQuery custom options -->

        <script>
            /* <![CDATA[ */
            // NEWSLETTER FORM AJAX SUBMIT
            $('.newsletter .submit').on('click', function(event){
                event.preventDefault();
                var email = $('.email').val();
                var form_data = new Array({ 'Email' : email});
                $.ajax({
                    type: 'POST',
                    url: "contact.php",
                    data: ({'action': 'newsletter', 'form_data' : form_data})
                }).done(function(data) {
                    alert(data);
                });
            });
            
            $(window).load(function() {
                $('#slider').nivoSlider();
            });
                       
            /* CLIENTS SCROLL */
            $('#client-carousel').carouFredSel({
                prev: '.prev',
                next: '.next',
                auto: false,
                scroll: 1,
                width: 'variable',
                height: 'variable',
                swipe: {
                    ontouch: true,
                    onMouse: true
                },
                items:{
                    width: 'auto',
                    visible: 5
                }
            });
            
            // FOOTER CAROUSEL ARTICLE 
            $("#foo1").carouFredSel({
                auto: true,
                scroll: 1,
                pagination: "#foo1_pag",
                width: 'variable',
                height: 'variable',
                swipe: {
                    ontouch: true,
                    onMouse: true
                },
                items:{
                    width: 'auto',
                    visible: 1
                }
            });
            /* ]]> */
        </script>
    </body>
</html>
